import React, { FC, useCallback, ReactNode } from 'react';
import { Pagination } from 'choerodon-ui/pro';
import { PagerType } from 'choerodon-ui/pro/lib/pagination/Pagination';

import styles from './index.less';

export interface PaginationItemRenderProps {}

const PaginationItemRender: FC<PaginationItemRenderProps> = () => {
  const renderItem = useCallback((page: number, type: PagerType): ReactNode => {
    return (
      <a className={`item-render-${type}`}>{type==='page' ? page : type.toUpperCase()}</a>
    );
  }, []);
  return (
    <Pagination
      className={styles.pagination}
      total={100}
      pageSize={10}
      showPager
      itemRender={renderItem}
    />
  );
};

export default PaginationItemRender;
